<style lang="scss" scoped>
    @import "header.scss";
</style>
<template>
    <div class="header-content">
        <div  class="header">
            <ul class="nav">
                
                <li @click="showRightSlider" class="slider">
                    <i  class="iconfont icon-zhankai"></i>
                </li>
                <!-- <li class="search" @click="locationMethod">
                    <i class="iconfont icon-dibiao"></i>
                </li> -->
                <router-link to="/my" tag="li" activeClass="headerActive"><p>我的1</p></router-link>
                <router-link to="/detail/" tag="li"  activeClass="headerActive"><p>发现</p></router-link>
                <router-link to="/recommended" tag="li" activeClass="headerActive" fun="fun"><p>推荐</p></router-link>
                <li class="search-bar">
                    <div class="search-box"  @click="showSearchMethod">
                        <i class="iconfont icon-sousuo"></i>
                    </div>
                </li>
                <!-- <li>
                    {{address}}
                </li> -->
            </ul>
        </div>
        <div class="right-slider-content">
            <div :class="!showSlider ? 'right-slider-box hide' : 'right-slider-box show'" @click="closeRightSlider">
            </div>
            <div :class="showSlider ? 'right-slider active' : 'right-slider active leave'">
                <div class="user-info">
                </div>
            </div>
        </div>
        <div class="search-content" :class="showSearch ? 'show' : 'hide'">
            <div class="search-header">
                <div class="search-box">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="text" class="search-input"  v-model="message" placeholder="搜索音乐、视频、歌词、电台">
                </div>
                <span class="search-close-bar" @click="hideSearchMethod">
                    取消
                </span>
            </div>
            <div class="search-list">
                <div class="search-texts" v-if="message" @click="search()">
                    <span>搜索</span>
                    <span class="search-text">“{{message}}”</span>
                </div>
            </div>
        </div>
        <Map :open="open" v-if="open"></Map>
    </div>
</template>
<script type="es6">
    import store from './../store/index'
    import Map from './../components/map'
    import router from "./../router/index";
    export default {
        data(){
            return{
                message:'daa',
                showSlider:false,
                showSearch:false,
                address:'' ,
                open: false
            }
        },
        mounted(){
        },
        components : {
            Map,
        },
        methods:{
            showRightSlider(){
                this.showSlider = true ;
            },
            closeRightSlider(){
                this.showSlider = false ;
            },
            showSearchMethod(){
                this.showSearch = true ;
                this.message = '' ;
            },
            hideSearchMethod(){
                this.showSearch = false ;
            },
            search(){
                // const { $store } = this;
                // $store.commit("SEARCH" , "黄瑜爱蒋涛")
                this.$store.dispatch(('searchData'),{keywords:this.message}).then(() => {})
            console.log(this.$store)
               
        },
        locationMethod(){
            this.open = true
        },
    }
}
</script>